import React from 'react';
import { Form, Input, Button, Select, Row, Col, TreeSelect } from 'antd';
import PageTopFormContent from '@/components/PageTopFormContent';
import useOrgTreeSelect from '@/hooks/useOrgTreeSelect';
import useOrgUserTreeSelect from '@/hooks/useOrgUserTreeSelect';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 24 },
};

const { Option } = Select;

const TopQueryForm = ({ form, submit, reset }) => {
  // 获取组织树的自定义钩子
  const [treeData, handleTreeDataLoad] = useOrgTreeSelect();
  const [userTreeData, handleOrgTreeDataLoad] = useOrgUserTreeSelect();

  return (
    <PageTopFormContent
      title="岗位标签管理"
      content={(
        <Form {...layout} form={form} name="advanced_search">
          <Row gutter={[32, 16]}>
            <Col className="gutter-row" span={8}>
              <Form.Item name="labelName" label="标签名称">
                <Input placeholder="请输标签名称" />
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={8}>
              <Form.Item name="status" label="标签状态">
                <Select
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  placeholder="请选择标签状态"
                  allowClear
                >
                  <Option value="1">开</Option>
                  <Option value="0">关</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={8}>
              <Form.Item name="sysOrgId" label="组织">
                <TreeSelect
                  loadData={handleTreeDataLoad}
                  treeData={treeData}
                  placeholder="请选择组织"
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  allowClear
                />
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={8}>
              <Form.Item name="sysEmployeeId" label="关联用户">
                <TreeSelect
                  loadData={handleOrgTreeDataLoad}
                  treeData={userTreeData}
                  placeholder="请选择关联用户"
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  allowClear
                />
              </Form.Item>
            </Col>
            <Col className="gutter-row" span={16} style={{ textAlign: 'right' }}>
              <Form.Item wrapperCol={{ ...layout.wrapperCol }}>
                <Button type="primary" onClick={submit}>
                  查询
                </Button>
                <Button style={{ marginLeft: 16 }} onClick={reset}>
                  重置
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      )}
    />
  );
};

export default TopQueryForm;
